<template>
  <div style="background-color: #f5f6fa">
    <!-- <hear></hear> -->
    <BDhear :num="3"></BDhear>
    <div style="background-color: #ffffff; width: 100%">
      <div class="Submission_box">
        <div
          @click.stop="Stop()"
          class="Submission_box_details"
          v-for="(item, index) in SubList"
          :key="index"
        >
          <div class="Sub_hear">
            <div style="font-size: 19px; color: #333; font-weight: Bold">
              {{ item.name }}
            </div>
            <div class="Sub_hear_img">
              <img
                v-if="item.urltype == 'jpg'"
                src="../../assets/BidSecurity/JPG.png"
              />
              <img
                v-if="item.urltype == 'png'"
                class="Sub_hear_img"
                src="../../assets/BidSecurity/PNG.png"
              />
              <img
                v-if="item.urltype == 'pdf'"
                class="Sub_hear_img"
                src="../../assets/BidSecurity/PDF.png"
              />
              <img
                v-if="item.urltype == 'docx'"
                class="Sub_hear_img"
                src="../../assets/BidSecurity/WORD.png"
              />
            </div>
          </div>

          <div class="Sub_btn">
            <el-button
              v-if="item.type"
              style="width: 80%; height: 53px"
              @click.stop="SubSee(item.name)"
              >点击上传</el-button
            >
            <el-button
              v-else
              style="width: 80%; height: 53px"
              @click.stop="shouyulan(item.typr)"
              >点击预览</el-button
            >
          </div>
          <div class="Sub_format">
            <el-button
              v-if="!item.type"
              style="width: 80%; height: 53px"
              @click.stop="SubSee(item.name)"
              >重新上传</el-button
            >
          </div>
        </div>
      </div>
      <div class="fl Sub_footer_btn">
        <div>
          <el-button @click="Institution" style="width: 164px; height: 48px"
            >上一步</el-button
          >
        </div>
        <div>
          <el-button
            @click="bidFrom"
            style="width: 164px; height: 48px; margin-left: 20px"
            type="primary"
            >下一步</el-button
          >
        </div>
      </div>
      <el-dialog
        :title="title"
        :close-on-click-modal="false"
        v-dialogDrag
        :visible.sync="statis"
        width="400px"
        center
      >
        <!-- {{fileList}} -->
        <div class="upload_box">
          <el-upload
            ref="upload"
            style="display: flex; justify-content: center; flex-direction: column;align-items: center;"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="cionyulan"
            :limit="6"
            class="upload-demo"
            :data="dataObj"
            drag
            action="http://192.168.0.28:8082/system/oss/upload"
            multiple
            :headers="headers"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png/pdf文件，且不超过500kb
            </div> -->
          </el-upload>
          <!-- <iframe v-else :src="$baseUrl +urls" frameborder="0" class="el-upyu" style="  display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;"></iframe> -->
        </div>

        <span
          slot="footer"
          style="display: flex; justify-content: center; width: 100%"
          class="dialog-footer"
        >
          <el-button @click="cionsshngs">取消上传</el-button>
          <el-button type="primary" @click="cionsshng">完成上传</el-button>
        </span>
      </el-dialog>
      <!-- //删除

 -->
    </div>
  </div>
</template>

<script>
// import hear from ".././../components/hear.vue";
import BDhear from "./BDhear.vue";
import { datatijiao } from "@/api/system/liucheng";
export default {
  components: {
    // hear,
    BDhear,
  },
  name: "Submission",
  data() {
    return {
      // 上传证书
      // 开户许可证
      params: {
        gczzzs: "", //'工程资质证书 复印件',
        khxkz: "", //'开户行许可证',
        zbwj: "", // '招标文件',
        zbtzs: "", //'中标通知书',
        sght: "", // '施工合同',
        // frzms: "", // '法定代表人证明书',
        zscnh: "", // '资料真实性承诺函'
        sjbg: "", //审计报告
        yyzh: "", //营业执照
        frsfz: "", //法人身份证
        aqscz: "", //安全生产许可证
        ossIdList: [],
      },
      khxkzId: "",
      zbwjId: "",
      zbtzsId: "",
      sghtId: "",
      zscnhId: "",
      sjbgId: "",
      gczzzsId: "",
      // frzmsId: "",
      yyzhId: "",
      frsfzId: "",
      aqsczId: "",
      title: "",
      shuliang: 0,
      urls: "",
      statis: false,
      sstatis: false,
      urltype: "",
      SubList: [
        {
          name: "工程资质证书",
          typr: "",
          type: true,
          urltype: "",
        },
        {
          name: "招标文件",
          typr: "",
          type: true,
          urltype: "",
        },
        {
          name: "中标通知书",
          typr: "",
          type: true,
          urltype: "",
        },
        {
          name: "营业执照",
          typr: "",
          type: true,
          urltype: ""
        },
        {
          name: "法人身份证",
          typr: "",
          type: true,
          urltype: ""
        },
        {
          name: "开户行许可证",
          typr: "",
          type: true,
          urltype: ""
        },
        {
          name: "安全生产许可证",
          typr: "",
          type: true,
          urltype: ""
        },
        // {
        //   name: "施工合同",
        //   typr: "",
        //   type: true,
        //   urltype: "",
        // },
        // {
        //   name: "法定代表人证明书",
        //   typr: "",
        //   type: true,
        //     urltype:"",
        // },
        {
          name: "材料真实性承诺函",
          typr: "",
          type: true,
          urltype: "",
        },
        // {
        //   name: "近一年审计报告",
        //   typr: "",
        //   type: true,
        //   urltype: "",
        // },
      ],
      headers: {},
      token: "",
      dataObj: {
        apply_number: "",
      },
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.headers = { Authorization: "Bearer " + this.token };
    this.dataObj.apply_number = sessionStorage.getItem("apply_number");
    console.log(this.headers);
  },
  methods: {
    cionyulan(res) {
      console.log("文件", res.response.data);
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = "http://192.168.0.28:8082/" + res.response.data;
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      // document.body.removeChild(link);
      // console.log("密文预览");
    },
    shouyulan(res) {
      console.log(res);
      this.$confirmMy({
        title: res,
      });
      return;
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = "http://192.168.0.28:8082/" + res;
      // console.log(link.href)
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      // document.body.removeChild(link);
      // console.log("密文预览");
    },
    handleAvatarSuccess(res, file) {
      console.log(res.data);
      this.urls = res.data.url;
      this.ossId = res.data.ossId;
      this.urltype = res.data.fileName.split(".")[1];
      console.log(this.urltype);
    },
    cionsshng() {
      this.shuliang = this.shuliang + 1;
      if (this.urls == "") {
        this.$message({
          showClose: true,
          message: "请上传文件",
          type: "warning"
        });
        return;
      } else {
        this.statis = false;
        this.$refs["upload"].clearFiles();
      }

      if (this.title == "工程资质证书") {
        this.params.gczzzs = this.urls;
        this.gczzzsId = this.ossId;
        this.SubList[0].typr = this.urls;
        this.SubList[0].type = false;
        this.SubList[0].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "招标文件") {
        this.params.zbwj = this.urls;
        this.zbwjId = this.ossId;
        this.SubList[1].typr = this.urls;
        this.SubList[1].type = false;
        this.SubList[1].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "中标通知书") {
        this.params.zbtzs = this.urls;
        this.zbtzsId = this.ossId;
        this.SubList[2].typr = this.urls;
        this.SubList[2].type = false;
        this.SubList[2].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "营业执照") {
        this.params.yyzh = this.urls;
        this.yyzhId = this.ossId;
        this.SubList[3].typr = this.urls;
        this.SubList[3].type = false;
        this.SubList[3].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "法人身份证") {
        this.params.frsfz = this.urls;
        this.frsfzId = this.ossId;
        this.SubList[4].typr = this.urls;
        this.SubList[4].type = false;
        this.SubList[4].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "开户行许可证") {
        this.params.khxkz = this.urls;
        this.khxkzId = this.ossId;
        this.SubList[5].typr = this.urls;
        this.SubList[5].type = false;
        this.SubList[5].urltype = this.urltype;
        this.urls = "";
      } else if (this.title == "材料真实性承诺函") {
        this.params.zscnh = this.urls;
        this.zscnhId = this.ossId;
        this.SubList[7].typr = this.urls;
        this.SubList[7].type = false;
        this.SubList[7].urltype = this.urltype;
        sessionStorage.setItem("zsxcns", this.urls);
        this.urls = "";
      } else if (this.title == "安全生产许可证") {
        this.params.aqscz = this.urls;
        this.aqsczId = this.ossId;
        this.SubList[6].typr = this.urls;
        this.SubList[6].type = false;
        this.SubList[6].urltype = this.urltype;
        // sessionStorage.setItem("sjbg", this.urls);
        this.urls = "";
      }
    },
    cionsshngs() {
      // this.shuliang = this.shuliang + 1;
      this.statis = false;
      this.$refs["upload"].clearFiles();
      if (this.title == "工程资质证书") {
        this.params.gczzzs = "";
        // this.SubList[0].typr = this.urls;
        // this.SubList[0].type = false;
        // this.SubList[0].urltype = this.urltype;
      } else if (this.title == "招标文件") {
        this.params.zbwj = "";
        // this.SubList[1].typr = this.urls;
        // this.SubList[1].type = false;
        //  this.SubList[1].urltype = this.urltype;
      } else if (this.title == "中标通知书") {
        this.params.zbtzs = "";
        // this.SubList[2].typr = this.urls;
        // this.SubList[2].type = false;
        //  this.SubList[2].urltype = this.urltype;
      } else if (this.title == "施工合同") {
        this.params.sght = "";
        // this.SubList[3].typr = this.urls;
        // this.SubList[3].type = false;
        //  this.SubList[3].urltype = this.urltype;
      } else if (this.title == "法定代表人证明书") {
        this.params.frzms = "";
        // this.SubList[4].typr = this.urls;
        // this.SubList[4].type = false;
        //  this.SubList[4].urltype = this.urltype;
      } else if (this.title == "材料真实性承诺函") {
        this.params.zscnh = "";
        // this.SubList[5].typr = this.urls;
        // this.SubList[5].type = false;
        //  this.SubList[5].urltype = this.urltype;
      } else if (this.title == "近一年审计报告") {
        this.params.sjbg = "";
        // this.SubList[5].typr = this.urls;
        // this.SubList[5].type = false;
        //  this.SubList[5].urltype = this.urltype;
      }else if (this.title == "安全生产许可证") {
        this.params.aqscz = "";
      }else if (this.title == "开户行许可证") {
        this.params.khxkz = "";
      }else if (this.title == "法人身份证") {
        this.params.frsfz = "";
      }else if (this.title == "营业执照") {
        this.params.yyzh = "";
      }
    },
    beforeAvatarUpload(file) {},
    SubSee(title) {
      this.title = title;
      this.statis = true;
    },
    sSubSee(title) {
      this.title = title;

      this.sstatis = true;
    },
    Stop() {
      this.statis = false;
    },
    Institution() {
      this.$router.push("/BidSecurity/financialInstitution");
    },
    bidFrom() {
      this.params.applyNumber = sessionStorage.getItem("apply_number");
      this.params.guaranteeApplyId =
        sessionStorage.getItem("guarantee_apply_id");
      // sessionStorage.getItem("guarantee_comid");
      // this.params.user_id = sessionStorage.getItem("user_id");
      // this.params.ossIdList = [
      //   this.khxkzId,
      //   this.zbwjId,
      //   this.zbtzsId,
      //   this.sghtId,
      //   this.zscnhId,
      //   this.sjbgId,
      // ].join(",");
      this.params.ossIdList = [
        {
          ossId: this.khxkzId,
          fileCode: "1",
          fileName: "开户许可证",
          filePath: this.params.khxkz,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.zbwjId,
          fileCode: "2",
          fileName: "招标文件",
          filePath: this.params.zbwj,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.zbtzsId,
          fileCode: "3",
          fileName: "中标通知书",
          filePath: this.params.zbtzs,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.yyzhId,
          fileCode: "4",
          fileName: "营业执照",
          filePath: this.params.yyzh,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.zscnhId,
          fileCode: "5",
          fileName: "资料真实性承诺函",
          filePath: this.params.zscnh,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.frsfzId,
          fileCode: "6",
          fileName: "法人身份证",
          filePath: this.params.frsfz,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.gczzzsId,
          fileCode: "7",
          fileName: "工程资质证书",
          filePath: this.params.gczzzs,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        },
        {
          ossId: this.aqsczId,
          fileCode: "8",
          fileName: "安全生产许可证",
          filePath: this.params.aqscz,
          applyNumber: this.params.applyNumber,
          guaranteeApplyId: this.params.guaranteeApplyId,
          biddingNumber: sessionStorage.getItem("bidding_name")
        }
      ];
      datatijiao(this.params.ossIdList).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("提交成功");
          if (
            (this.nametype = sessionStorage.getItem("bhlein") == "投标保函")
          ) {
            this.$router.push("/BidSecurity/bidFroms");
          } else {
            this.$router.push("/BidSecurity/bidFrom");
          }
        }
      });
    },
  },
};
</script>
<style>
.nav ul li a {
  font-size: 16px;
  color: #000 !important;
  display: block;
  text-decoration: none;
  height: 45px;
  line-height: 45px;
  padding: 0 18px 0px;
  min-width: 50px;
  text-align: center;
  transition: all 0.8s;
}
</style>
<style scoped>
/* img{
  width: 100%;
} */
.upload_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader {
  display: flex;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px dashed #212529;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.Sub_popper_btn {
  position: relative;
  left: 27%;
  top: 20%;
}
::v-deep.el-dialog__header {
  background: #1795ff !important;
}
.Sub_CoItn_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog--center {
  text-align: left !important;
}
.Sub_CoItn_img img {
  width: 253px;
  height: 253px;
}

.Sub_footer_btn {
  margin: 20px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.Sub_cancel {
  width: 13.52px;
  height: 13.52px;
  font-size: 23.52px;
  color: #ffffff;
  margin-right: 30px;
  padding-bottom: 20px;
}

.sub_poper_hear {
  width: 718px;
  height: 59px;
  background-color: #1795ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub_poper {
  width: 718px;
  height: 562px;
  border: 1px solid #e7e7e7;
  position: relative;
  bottom: 72%;
  left: 30%;
  background-color: #ffffff;

  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.09);
}

.Sub_format {
  font-size: 16px;
  font-weight: Regular;
  color: rgba(0, 0, 0, 0.45);
  flex: 1;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  /* position: relative;
  left: 10%;
  top: 40%; */
}
.Sub_btn {
  flex: 1;
  display: flex;
  justify-content: center;
  /* position: relative;
  left: 9%;
  top: 36%; */
}

.Sub_hear {
  width: 100%;
  height: 55px;
  flex: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  /* padding-top: 25px; */
}

.Sub_hear_img {
  width: 55px;
  height: 55px;
}

.Submission_box_details {
  margin-bottom: 20px;
  width: 24%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
  height: 285.51px;
  border-radius: 4px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
}

.Submission_box {
  /* position: relative;
  left: 10%;
  top: 2%; */
  padding: 1% 5%;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
</style>
